<template>
	<view>
		<view class="pl15 pr15">
			<view class="mb15 item_box">
				<view class="title color_one d-flex a-center j-sb">
					<view>1号楼南水箱温度</view>
					<view>{{cardData1.deviceValue}} °C</view>
				</view>
				<view style="height: 500rpx;width: 100%;">
					<echartsUniapp ref="echarts111" :option="oneOption" canvasId="echarts111"></echartsUniapp>
				</view>
			</view>
			<view class="mb15 item_box">
				<view class="title color_two d-flex a-center j-sb">
					<view>1号楼北水箱温度</view>
					<view>{{cardData2.deviceValue}} °C</view>
				</view>
				<view style="height: 500rpx;width: 100%;">
					<echartsUniapp ref="echarts222" :option="twoOption" canvasId="echarts222"></echartsUniapp>
				</view>
			</view>
			<view class="mb15 item_box">
				<view class="title color_three d-flex a-center j-sb">
					<view>3号楼南水箱温度</view>
					<view>{{cardData3.deviceValue}} °C</view>
				</view>
				<view style="height: 500rpx;width: 100%;">
					<echartsUniapp ref="echarts333" :option="threeOption" canvasId="echarts333"></echartsUniapp>
				</view>
			</view>
			<view class="mb15 item_box">
				<view class="title color_four d-flex a-center j-sb">
					<view>3号楼北水箱温度</view>
					<view>{{cardData4.deviceValue}} °C</view>
				</view>
				<view style="height: 500rpx;width: 100%;">
					<echartsUniapp ref="echarts444" :option="fourOption" canvasId="echarts444"></echartsUniapp>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import echartsUniapp from "@/components/echarts-uniapp/echarts-uniapp.vue"
	import {
		queryOneListSunControlByNum,
	} from "@/api/dormBuilding/solarEnergy.js"

	export default {
		components: {
			echartsUniapp
		},
		data() {
			return {
				userInfo: {},
				timeout: [],

				cardData1: {
					deviceCode: '',
					deviceValue: '',
				},
				cardData2: {
					deviceCode: '',
					deviceValue: '',
				},
				cardData3: {
					deviceCode: '',
					deviceValue: '',
				},
				cardData4: {
					deviceCode: '',
					deviceValue: '',
				},

				oneOption: {},
				twoOption: {},
				threeOption: {},
				fourOption: {},
			}
		},
		created() {
			this.userInfo = uni.getStorageSync('userInfo')
		},
		mounted() {
			this.queryOneListSunControlByNum()

			this.setupTimer()
		},
		methods: {
			// 设置定时器
			setupTimer() {
				let _this = this;
				_this.timeout[0] = setInterval(() => {
					_this.queryOneListSunControlByNum()
				}, 30000);
			},
			// 清除定时器
			clearTimer() {
				let _this = this;
				if (_this.timeout.length > 0) {
					_this.timeout.forEach(item => {
						clearInterval(item);
					})
				}
			},
			queryOneListSunControlByNum() {
				queryOneListSunControlByNum().then(res => {
					let tempData = res.object || []

					this.cardData1.deviceValue = this.formatNumber(tempData[0].deviceValue)
					this.cardData1.deviceCode = tempData[0].deviceCode

					this.cardData2.deviceValue = this.formatNumber(tempData[1].deviceValue)
					this.cardData2.deviceCode = tempData[1].deviceCode

					this.cardData3.deviceValue = this.formatNumber(tempData[2].deviceValue)
					this.cardData3.deviceCode = tempData[2].deviceCode

					this.cardData4.deviceValue = this.formatNumber(tempData[3].deviceValue)
					this.cardData4.deviceCode = tempData[3].deviceCode

					this.oneOption = this.initEchart(this.cardData1.deviceValue)
					this.twoOption = this.initEchart(this.cardData2.deviceValue)
					this.threeOption = this.initEchart(this.cardData3.deviceValue)
					this.fourOption = this.initEchart(this.cardData4.deviceValue)
				})
			},

			initEchart(data) {
				let myData = {
					series: [{
							type: 'gauge',
							center: ['50%', '60%'],
							startAngle: 210,
							endAngle: -30,
							min: 0,
							max: 100,
							splitNumber: 10,
							itemStyle: {
								color: '#FFAB91',
							},
							progress: {
								show: true,
								width: 12
							},
							pointer: {
								show: false
							},
							axisLine: {
								lineStyle: {
									width: 12
								}
							},
							axisTick: {
								distance: -20,
								length: 2,
								splitNumber: 5,
								lineStyle: {
									width: 0.5,
									color: '#999'
								}
							},
							splitLine: {
								distance: -24,
								length: 6,
								lineStyle: {
									width: 1,
									color: '#999'
								}
							},
							axisLabel: {
								distance: -10,
								color: '#999',
								fontSize: 8,
							},
							anchor: {
								show: false
							},
							title: {
								show: false
							},
							detail: {
								valueAnimation: true,
								width: '80%',
								lineHeight: 30,
								borderRadius: 8,
								offsetCenter: [0, '-5%'],
								fontSize: 18,
								fontWeight: 'bolder',
								formatter: '{value} °C',
								color: 'inherit'
							},
							data: [{
								value: data
							}]
						},
						{
							type: 'gauge',
							center: ['50%', '60%'],
							startAngle: 210,
							endAngle: -30,
							min: 0,
							max: 100,
							itemStyle: {
								color: '#FD7347'
							},
							progress: {
								show: true,
								width: 3
							},
							pointer: {
								show: false
							},
							axisLine: {
								show: false
							},
							axisTick: {
								show: false
							},
							splitLine: {
								show: false
							},
							axisLabel: {
								show: false
							},
							detail: {
								show: false
							},
							data: [{
								value: data
							}]
						}
					]
				};

				return myData
			},

			formatNumber(numberStr) {
				try {
					let number = parseFloat(numberStr);

					if (isNaN(number)) {
						throw new Error("Invalid number format: " + numberStr);
					}

					// 保留一位小数并向下取整
					let roundedNumber = Math.trunc((number * 10).toFixed(1)) / 10;

					// 如果结果为0或-0，返回字符串"0"
					if (roundedNumber === 0) {
						return 0;
					}

					return roundedNumber;
				} catch (e) {
					console.error(e.message);
					return null;
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.item_box {
		background: #ffffff;
		border-radius: 16rpx;
		box-shadow: 0px 0px 20rpx 0px rgba(0, 0, 0, 0.10);
		overflow: hidden;

		.title {
			font-size: 30upx;
			font-family: Source Han Sans CN, Source Han Sans CN-500;
			font-weight: 500;
			color: #ffffff;
			padding: 20rpx;
		}

		.color_one {
			background: #ddaa6f;
		}

		.color_two {
			background: #6fdd7c;
		}

		.color_three {
			background: #6fcddd;
		}

		.color_four {
			background: #6f75dd;
		}
	}
</style>